<template>
  <div class="content">
    <!-- <div class="filter">
      <el-select clearable v-model="filter.startStation" placeholder="请选择起始站">
        <el-option
          v-for="item in cities"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-select clearable v-model="filter.endStation" placeholder="请选择终点站">
        <el-option
          v-for="item in cities"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-select v-model="filter.type" placeholder="请选择类型">
        <el-option
          v-for="item in types"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="filterData">查询</el-button>
    </div> -->

    <div class="table" style="margin-top: 20px;">
      <el-table size="mini" :data="tableDataFilter" style="width: 100%">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column prop="name" label="车次"> </el-table-column>
        <el-table-column prop="startStation" label="起始站"> </el-table-column>
        <el-table-column prop="endStation" label="终点站"> </el-table-column>
        <el-table-column prop="startTime" label="起始时间" :formatter="fT1">
        </el-table-column>
        <el-table-column prop="endTime" label="到达时间" :formatter="fT2">
        </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="doBuy(scope.row)"
              >买票</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="pageNum"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="购买数量"
      :visible.sync="dialog"
      width="30%"
      :before-close="handleClose">
      <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="buyTrain">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTrain, addTicket, getUserInfo } from "../service";
import moment from 'moment'
export default {
  data() {
    return {
      cities: ["北京", "上海", "南京", "广州", "重庆", "成都", "青岛"],
      types: ["动车", "高铁", "快车"],
      filter: {
        startStation: "",
        endStation: "",
        type: "",
      },
      userInfo: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableDataFilter: [],
      dialog: false,
      num: 0,
    };
  },
  created() {
    let ls = localStorage.getItem("meiyaWebInfo");
    if (ls) {
      this.userInfo = JSON.parse(ls);
      getUserInfo(this.userInfo._id).then((res) => {
        this.userInfo = {
          ...res.data,
        };
      });
    }
    this.getTrain();
  },
  methods: {
    changeType() {
      this.pageNum = 1;
      this.handlePage();
    },
    handleClose() {
      this.dialog = false
    },
    filterData() {

    },
    getTrain() {
      getTrain().then((res) => {
        this.tableData = res.data
        this.naviData();
      });
    },
    naviData() {
      this.tableDataFilter = this.tableData.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageSize * this.pageNum
      );
    },
    fT1(row) {
      return moment(row.startTime).format('YYYY-MM-DD')
    },
    fT2(row) {
      return moment(row.endTime).format('YYYY-MM-DD')
    },
    handleCurrentChange(index) {
      this.pageNum = index
      this.naviData()
    },
    doBuy(row) {
      if (!this.userInfo.username) {
        this.$notify({
          title: "提示",
          message: "请先登录",
          duration: 0,
        });
        return;
      }
      this.row = row;
      this.num = 0
      this.dialog = true
    },
    buyTrain() {
      if (!this.num) {
        this.$notify({
          title: "提示",
          message: "请选择数量",
          duration: 0,
        });
        return
      }
      addTicket({
        type: 'train',
        userId: JSON.parse(localStorage.getItem("meiyaWebInfo"))._id,
        buyTime: moment(this.date).format("YYYY-MM-DD"),
        funName: this.row.name,
        date: this.row.startTime,
        count: this.num,
      }).then(res => {
        console.log(res)
        if (res.code === 200) {
            this.$message.success('购买成功')
            this.dialog = false;
          }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1200px;
  height: 70vh;
  margin: 80px auto;
}

.filter {
  display: flex;
  gap: 10px;
}
.pagination {
  text-align: center;
}
</style>
